<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_state</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下
      1. 显示h2标题, 初始文本为: 你喜欢我
      2. 点击标题更新为: 我喜欢你
    */
    class Like extends React.Component {
        constructor(props) {
            super(props);
            //初始化状态
            this.state = {
                isLikeMe: false
            };

            this.handleClick = this.handleClick.bind(this);
        }

        //新增方法内部的this默认不是指向组建，而是undifine
        handleClick() {
            const isLikeMe = !this.state.isLikeMe;
            //更新状态
            this.setState({isLikeMe})
        }

        //默认方法
        render() {
            //读取状态
            const {isLikeMe} = this.state;
            return <h2 onClick={this.handleClick}>{isLikeMe ? '达少最帅' : '最帅达少'}</h2>
        }
    }

    ReactDOM.render(<Like/>, document.getElementById('example'));
</script>
</body>
</html>

